<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
#div1 input{background-color:white;}
#div1 input.active{background-color: yellow;}
#div1 div{width:200px;height:200px;background-color: #ccc;display: none;}
    </style>
    <script>
        window.onload=function(){//初始化整个程序
            new TabSwitch('div1');//初始化TabSwitch这个对象
        };


//        <!--构造函数是初始化整个对象-->
//        var aBtn=null;//全局变量
//        var aDiv=null;//全局变量

function TabSwitch(id){//选项卡对象的类
    var _this=this;
    var oDiv=document.getElementById(id);
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].index=i;
        this.aBtn[i].onclick=function(){
            _this.fnClick(this);
        };//fnClick已经不是函数，而是方法了，所以需要加this.fnClick
    }
}
//对象  方法
//第一步将函数从嵌套中提取出来，将变量设置为全局变量
//第二步将window.onload干掉,并且将全局变量改成属性----变量变成属性
//第三步将函数改为方法，用prototype（原型）来让函数变为方法,简言之，方法都是通过原型来加的---函数变成方法

TabSwitch.prototype.fnClick=function(oBtn){
    //alert(this);//this指的new出来的对象
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].className='';
        this.aDiv[i].style.display='none';
//        在面向对象中，this代表当前对象,而不是代表当前被点击的按钮
    }
    oBtn.className='active';
    this.aDiv[oBtn.index].style.display='block';
};




    </script>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="aaa">
    <input type="button" value="bbb">
    <input type="button" value="ccc">
    <div style="display: block;">aaa</div>
    <div>bbb</div>
    <div>ccc</div>
</div>
<div>
    window.onload                   构造函数
          初始化整个程序                   初始化整个对象
    变量                             属性
    函数                             方法
</div>
</body>
</html>